import type { AliasToken } from '../interface';
import type { TokenTree } from './interface';
import { seedRelatedAlias, seedRelatedMap } from './TokenRelation';

const category: TokenTree<keyof AliasToken> = [
  {
    name: '颜色',
    nameEn: 'Color',
    desc: '',
    descEn: '',
    groups: [
      {
        key: 'brandColor',
        type: 'Color',
        name: '品牌色',
        nameEn: 'Brand Color',
        desc: '品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义。',
        descEn: '',
        seedToken: ['colorPrimary'],
        mapToken: seedRelatedMap.colorPrimary,
        aliasToken: seedRelatedAlias.colorPrimary,
      },
      {
        key: 'successColor',
        type: 'Color',
        name: '成功色',
        nameEn: 'Success Color',
        desc: '',
        descEn: '',
        seedToken: ['colorSuccess'],
        mapToken: seedRelatedMap.colorSuccess,
        aliasToken: seedRelatedAlias.colorSuccess,
      },
      {
        key: 'warningColor',
        type: 'Color',
        name: '警戒色',
        nameEn: 'Warning Color',
        desc: '',
        descEn: '',
        seedToken: ['colorWarning'],
        mapToken: seedRelatedMap.colorWarning,
        aliasToken: seedRelatedAlias.colorWarning,
      },
      {
        key: 'errorColor',
        type: 'Color',
        name: '错误色',
        nameEn: 'Error Color',
        desc: '',
        descEn: '',
        seedToken: ['colorError'],
        mapToken: seedRelatedMap.colorError,
        aliasToken: seedRelatedAlias.colorError,
      },
      {
        key: 'infoColor',
        type: 'Color',
        name: '信息色',
        nameEn: 'Info Color',
        desc: '',
        descEn: '',
        seedToken: ['colorInfo'],
        mapToken: seedRelatedMap.colorInfo,
        aliasToken: seedRelatedAlias.colorInfo,
      },
      {
        key: 'neutralColor',
        type: 'Color',
        name: '中性色',
        nameEn: 'Neutral Color',
        desc: '中性色主要被大量的应用在界面的文字、背景、边框和填充的 4 种场景。合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。',
        descEn: '',
        seedToken: ['colorTextBase', 'colorBgBase'],
        mapToken: seedRelatedMap.colorTextBase?.concat(seedRelatedMap.colorBgBase ?? []),
        aliasToken: seedRelatedAlias.colorTextBase?.concat(seedRelatedAlias.colorBgBase ?? []),
        aliasTokenDescription:
          '你可以利用 Alias Token 来精准控制部分组件的效果。例如 Input 、InputNumber、Select 等Control 类组件都共享了相同的 controlXX token 。只需修改值，即可实现不改变 Button 的情况下，修改 Control 类组件的效果。',
        mapTokenGroups: ['text', 'border', 'fill', 'background'],
      },
    ],
  },
  {
    name: '尺寸',
    nameEn: 'Size',
    desc: '',
    descEn: '',
    groups: [
      {
        key: 'font',
        name: '文字',
        nameEn: 'Font',
        desc: '',
        descEn: '',
        seedToken: ['fontSize'],
        groups: [
          {
            key: 'fontSize',
            type: 'FontSize',
            name: '字号',
            nameEn: 'Font Size',
            desc: '',
            descEn: '',
            mapToken: [
              'fontSize',
              'fontSizeSM',
              'fontSizeLG',
              'fontSizeXL',
              'fontSizeHeading1',
              'fontSizeHeading2',
              'fontSizeHeading3',
              'fontSizeHeading4',
              'fontSizeHeading5',
            ],
            aliasToken: ['fontSizeIcon'],
          },
          {
            key: 'lineHeight',
            type: 'LineHeight',
            name: '行高',
            nameEn: 'Line Height',
            desc: '',
            descEn: '',
            mapToken: [
              'lineHeight',
              'lineHeightSM',
              'lineHeightLG',
              'lineHeightHeading1',
              'lineHeightHeading2',
              'lineHeightHeading3',
              'lineHeightHeading4',
              'lineHeightHeading5',
            ],
          },
        ],
      },
      {
        key: 'spacing',
        name: '间距',
        nameEn: 'Spacing',
        desc: '',
        descEn: '',
        seedToken: ['sizeStep', 'sizeUnit'],
        groups: [
          {
            key: 'margin',
            type: 'Margin',
            name: '外间距',
            nameEn: 'Margin',
            desc: '',
            descEn: '',
            mapToken: [
              'marginXXS',
              'marginXS',
              'marginSM',
              'margin',
              'marginMD',
              'marginLG',
              'marginXL',
              'marginXXL',
            ],
          },
          {
            key: 'padding',
            type: 'Padding',
            name: '内间距',
            nameEn: 'Padding',
            desc: '',
            descEn: '',
            mapToken: [
              'paddingXXS',
              'paddingXS',
              'paddingSM',
              'padding',
              'paddingMD',
              'paddingLG',
              'paddingXL',
            ],
            aliasToken: [
              'paddingContentHorizontal',
              'paddingContentVertical',
              'paddingContentHorizontalSM',
              'paddingContentVerticalSM',
              'paddingContentHorizontalLG',
              'paddingContentVerticalLG',
            ],
          },
        ],
      },
    ],
  },
  {
    name: '风格',
    nameEn: 'Style',
    desc: '',
    descEn: '',
    groups: [
      {
        key: 'borderRadius',
        type: 'BorderRadius',
        name: '圆角',
        nameEn: 'Border Radius',
        desc: '',
        descEn: '',
        seedToken: ['borderRadius'],
        mapToken: ['borderRadius', 'borderRadiusSM', 'borderRadiusLG', 'borderRadiusXS'],
      },
      {
        key: 'boxShadow',
        type: 'BoxShadow',
        name: '阴影',
        nameEn: 'Shadow',
        desc: '',
        descEn: '',
        mapToken: ['boxShadow', 'boxShadowSecondary'],
      },
    ],
  },
  {
    name: '其他',
    nameEn: 'Others',
    desc: '',
    descEn: '',
    groups: [
      {
        key: 'other',
        type: 'other',
        name: '其他',
        nameEn: 'Others',
        desc: '',
        descEn: '',
        seedToken: ['wireframe'],
      },
    ],
  },
];

export default category;
